<template>
    <div class="box_dashuju">
        <div class="_title">
            <div>
                <img src="../../assets/Vector1.png" alt="">
            </div>
            <div>
                <img src="../../assets/Vector2.png" alt="">
            </div>
            <h3 class="header"><i>智慧党建云平台数据中心</i></h3>
        </div>
        <div class="center">
            <div class="left">
                <div class="leee">
                    <div class="block text-center leftshang">
                        <el-carousel>
                            <el-carousel-item>
                                <div class="left1">
                                    <div class="le1">
                                        <div><img src="../../assets/pirck.png" alt=""></div>
                                        <div style="font-weight: 700;">
                                            <i>学习矩阵情况统计</i>
                                        </div>
                                    </div>
                                    <div class="le2">
                                        <div>
                                            <p class="shu">{{ matrixList.nums }}</p>
                                            <p>文章总数量</p>
                                        </div>
                                        <div>
                                            <p class="shu">{{ matrixList.comment }}</p>
                                            <p>累计评论条数</p>
                                        </div>
                                        <div>
                                            <p class="shu">{{ matrixList.point }}</p>
                                            <p>累计获得积分</p>
                                        </div>
                                    </div>
                                    <div class="le1">
                                        <div><img src="../../assets/pirck.png" alt=""></div>
                                        <div style="font-weight: 700;">
                                            <i>视频集锦情况统计</i>
                                        </div>
                                    </div>
                                    <div class="le2">
                                        <div>
                                            <p class="shu">{{ videoList.nums }}</p>
                                            <p>视频数量</p>
                                        </div>
                                        <div>
                                            <p class="shu">{{ videoList.views }}</p>
                                            <p>视频总播放次数</p>
                                        </div>
                                        <div>
                                            <p class="shu">{{ videoList.point }}</p>
                                            <p>累计获得积分</p>
                                        </div>
                                    </div>
                                </div>
                            </el-carousel-item>
                            <el-carousel-item>
                                <div class="left1">
                                    <div class="le1">
                                        <div><img src="../../assets/pirck.png" alt=""></div>
                                        <div style="font-weight: 700;">
                                            <i>最美网文情况统计</i>
                                        </div>
                                    </div>
                                    <div class="le2">
                                        <div>
                                            <p class="shu">{{ networkList.views }}</p>
                                            <p>浏览总量</p>
                                        </div>
                                        <div>
                                            <p class="shu">{{ networkList.nums }}</p>
                                            <p>累计文章总数</p>
                                        </div>
                                        <div>
                                            <p class="shu">{{ networkList.comment }}</p>
                                            <p>累计评论条数</p>
                                        </div>
                                    </div>
                                    <div class="le1">
                                        <div><img src="../../assets/pirck.png" alt=""></div>
                                        <div style="font-weight: 700;">
                                            <i>执勤大队答题测评情况统计</i>
                                        </div>
                                    </div>
                                    <div class="le2">
                                        <div>
                                            <p class="shu">{{ examList.member }}</p>
                                            <p>答题参与人数</p>
                                        </div>
                                        <div>
                                            <p class="shu">{{ examList.count }}</p>
                                            <p>累计答题练习次数</p>
                                        </div>
                                        <div>
                                            <p class="shu">{{ examList.point }}</p>
                                            <p>累计答题积分</p>
                                        </div>
                                    </div>
                                </div>
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                </div>
                <div class="left2">
                    <div class="leftxia">
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="le1">
                                        <div><img src="../../assets/pirck.png" alt=""></div>
                                        <div style="font-weight: 700;">
                                            <i>执勤党支部平均积分情况统计</i>
                                        </div>
                                    </div>
                                    <!-- 党支部累计积分total -->
                                    <Ztotal :datadeep="deptdzb" />
                                </div>
                                <div class="swiper-slide">
                                    <div class="le1">
                                        <div><img src="../../assets/pirck.png" alt=""></div>
                                        <div style="font-weight: 700;">
                                            <i>执勤党支部参与人数情况统计</i>
                                        </div>
                                    </div>
                                    <!-- 党支部参与人数member -->
                                    <Zmember :datadeep="deptdzb"></Zmember>
                                </div>
                                <div class="swiper-slide">
                                    <div class="le1">
                                        <div><img src="../../assets/pirck.png" alt=""></div>
                                        <div style="font-weight: 700;">
                                            <i>执勤大队平均积分情况统计</i>
                                        </div>
                                    </div>
                                    <!-- 执勤累计积分total -->
                                    <Qtotal :datadeep="deptzq"></Qtotal>
                                </div>
                                <div class="swiper-slide">
                                    <div class="le1">
                                        <div><img src="../../assets/pirck.png" alt=""></div>
                                        <div style="font-weight: 700;">
                                            <i>执勤大队参与人数情况统计</i>
                                        </div>
                                    </div>
                                    <!-- 执勤参与人数member -->
                                    <Qmember :datadeep="deptzq"></Qmember>
                                </div>
                            </div>
                            <!-- 如果需要分页器 -->
                            <div class="swiper-pagination"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="zhong">
                <div class="dygk">
                    <div class="zh1">
                        <div><img src="../../assets/pirck.png" alt=""></div>
                        <div style="font-weight: 700;">
                            <i>党员概况</i>
                        </div>
                    </div>
                    <div class="zh2">
                        <div>
                            <p class="shus">{{ memberList.member }}</p>
                            <p>正式党员总人数</p>
                        </div>
                        <div>
                            <p class="shus">{{ memberList.prepare }}</p>
                            <p>预备党员总数</p>
                        </div>
                        <div>
                            <p class="shus">{{ memberList.active }}</p>
                            <p>入党积极分子总数</p>
                        </div>
                        <div>
                            <p class="shus">{{ memberList.honor }}</p>
                            <p>党员荣誉总数</p>
                        </div>
                    </div>
                </div>
                <div class="ditu">
                    <Map :datadeep="area"></Map>
                </div>
                <div class="qzdd">
                    <div class="zh1">
                        <div><img src="../../assets/pirck.png" alt=""></div>
                        <div style="font-weight: 700;">
                            <i>执勤大队积分统计</i>
                        </div>
                    </div>
                    <div class="zh2">
                        <div>
                            <p class="shus">{{ point_member }}</p>
                            <p>参与人数</p>
                        </div>
                        <div>
                            <p class="shus">{{ point_total }}</p>
                            <p>累计积分总数</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="you1">
                    <div class="le1">
                        <div><img src="../../assets/pirck.png" alt=""></div>
                        <div style="font-weight: 700;">
                            <i>党员占比分布</i>
                        </div>
                    </div>
                    <div>
                        <Bing :datadeep="deptbing" />
                    </div>
                </div>
                <div class="zqd">
                    <div class="rightxia">
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="le1">
                                        <div><img src="../../assets/pirck.png" alt=""></div>
                                        <div style="font-weight: 700;">
                                            <i>执勤党支部答题测评情况统计</i>
                                        </div>
                                    </div>
                                    <!-- 党支部测评分数piont -->
                                    <Zpiont :datadeep="deptdzb" />
                                </div>
                                <div class="swiper-slide">
                                    <div class="le1">
                                        <div><img src="../../assets/pirck.png" alt=""></div>
                                        <div style="font-weight: 700;">
                                            <i>执勤党支部答题测评人数情况统计</i>
                                        </div>
                                    </div>
                                    <!-- 党支部测评参与人数 -->
                                    <Zcount :datadeep="deptdzb"></Zcount>
                                </div>
                                <div class="swiper-slide">
                                    <div class="le1">
                                        <div><img src="../../assets/pirck.png" alt=""></div>
                                        <div style="font-weight: 700;">
                                            <i>执勤大队答题测评情况统计</i>
                                        </div>
                                    </div>
                                    <!-- 执勤测评参与人数 -->
                                    <Qpiont :datadeep="deptzq"></Qpiont>
                                </div>
                                <div class="swiper-slide">
                                    <div class="le1">
                                        <div><img src="../../assets/pirck.png" alt=""></div>
                                        <div style="font-weight: 700;">
                                            <i>执勤大队答题测评人数情况统计</i>
                                        </div>
                                    </div>
                                    <!-- 执勤测评人数 -->
                                    <Qcount :datadeep="deptzq"></Qcount>
                                </div>
                            </div>
                            <!-- 如果需要分页器 -->
                            <div class="swiper-pagination"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { dataindex } from '@/api/team'
import Map from '../../components/Map.vue'
import Bing from '../../components/Bing.vue'
import Zhu from '../../components/Zhu.vue'
import Zmember from '@/components/Zmember.vue'
import Ztotal from '@/components/Ztotal.vue'
import Zpiont from '@/components/Zpiont.vue'
import Zcount from '@/components/Zcount.vue'
import Qcount from '@/components/Qcount.vue'
import Qmember from '@/components/Qmember.vue'
import Qpiont from '@/components/Qpiont.vue'
import Qtotal from '@/components/Qtotal.vue'
import Swiper from 'swiper'
import { onBeforeRouteUpdate } from 'vue-router'
function setRem() {
    var ui_w = 1920;
    // 获取屏幕的宽度
    var client_w = document.documentElement.clientWidth || document.body.clientWidth;
    //设置最大最小宽度
    client_w = client_w < 425 ? 425 : client_w;
    //client_w = client_w < 300 ? 300 : client_w;
    console.log(ui_w, client_w);

    // 通过js动态改变html根节点字体大小
    var html = document.getElementsByTagName("html")[0];
    html.style.fontSize = (client_w / ui_w) * 100 + 'px';
}
// 当页面加载的时候  也要调用一下setRem 目的  默认 把html 根节点的字体大小 设置为10px
window.onload = setRem;
onMounted(() => {
    // window.location.reload();
})
onBeforeRouteUpdate(() => {
    // 在路由更新前刷新页面
    location.reload();
});
// 加防抖
// window.onresize = function() {
//     clearTimeout(timer);
//     timer = setTimeout(setRem, 500)
// }
// setTimeout(() => {
// window.location.reload();
// }, 200)

// 加节流
var flg = true;
window.onresize = function () {
    if (flg) {
        flg = false;
        setTimeout(function () {
            flg = true;
            setRem();
        }, 300)
    }
}

let matrixList = ref({
    nums: "",
    comment: "",
    point: ""
})
let videoList = ref({
    nums: "",
    views: "",
    point: ""
})
let networkList = ref({
    nums: "",
    views: "",
    comment: ""
})
let examList = ref({
    member: "",
    count: "",
    point: ""
})
let memberList = ref({
    member: "",
    prepare: "",
    active: "",
    honor: "",
})
let point_member = ref()
let point_total = ref()
let deptzq = ref([])
let deptdzb = ref([])
let deptbing = ref([])
let area = ref([])
const dataindexss = () => {
    dataindex().then(res => {
        console.log(res.data.data.dept, 'er')
        matrixList.value = res.data.data.matrix
        videoList.value = res.data.data.video
        memberList.value = res.data.data.member
        networkList.value = res.data.data.network
        examList.value = res.data.data.exam
        deptzq.value = res.data.data.chart.zq
        deptdzb.value = res.data.data.chart.dzb
        deptbing.value = res.data.data.rate
        point_member.value = res.data.data.zq_member
        point_total.value = res.data.data.zq_point
        area.value = res.data.data.area
        setTimeout(initSwiper, 10)
    })
}

const initSwiper = () => {
    new Swiper('.swiper-container', {
        // loop: true,
        autoplay: {
            delay: 3000,  // 设置自动切换的时间间隔，单位为毫秒
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
        }
    });
}
dataindexss()
// function $forceUpdate() {
//     throw new Error('Function not implemented.')
// }
// const reload = () => {
//     $forceUpdate()
// }
// reload()
// const countDown = ref(1); // 初始倒计时时间为5秒

// const interval = setInterval(() => {
//     countDown.value--; // 每秒倒计时减一
//     if (countDown.value <= 0) {
//         window.location.reload()
//         return clearInterval(interval); // 倒计时结束，清除定时器
//     }
// }, 1000); // 每秒执行一次

// onMounted(() => {
//     this.update = true
// })
</script>

<style lang="scss" scoped>
@function torem($px) {
    //$px为需要转换的字号
    @return $px / 14px * 0.14rem; //100px为根字体大小
}

.zqd {
    width: 100%;
    height: torem(475px);
    overflow: hidden;
    margin-top: torem(20px);
    background: #2750795e;
}

.you1 {
    width: torem(531px);
    height: torem(308px);
    overflow: hidden;
    background: #2750793d;
}

.qzdd {
    width: torem(778px);
    height: torem(172px);
    overflow: hidden;
    background: #2750795e;
}

.ditu {
    width: torem(778px);
    height: torem(420px);
    margin-bottom: torem(20px);
    background-image: url('@/assets/ditu.png');
    // background: #2750793d;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: torem(20px);
}

.dygk {
    width: torem(778px);
    height: torem(172px);
    overflow: hidden;
    background: #2750793d;
}

.zh1 {
    width: torem(758px);
    height: torem(32px);
    margin-left: torem(10px);
    margin-top: torem(7px);
    background: #1f4e7e67;
    line-height: torem(32px);
    display: flex;

    img {
        width: torem(20px);
        height: torem(19px);
        margin: torem(5px);
    }
}

.zh2 {
    display: flex;
    justify-content: space-around;
    text-align: center;
    margin-top: torem(40px);
    margin-bottom: torem(25px);

    .shu {
        color: #FFB92D;
        font-size: torem(25px) !important;
        font-weight: 700;
        margin-bottom: torem(10px);
    }
}

.shus {
    color: #FFB92D;
    font-size: torem(36px) !important;
    font-weight: 700;
    margin-bottom: torem(10px);
}

#zhu {
    width: 100%;
    height: torem(450px);
}

.center {
    width: 100%;
    display: flex;
    color: #fff;

    .left {
        width: torem(531px);
        margin-left: torem(20px);
        margin-right: torem(20px);
    }

    .zhong {
        width: torem(778px);
        margin-right: torem(20px);
    }

    .right {
        width: torem(531px);
    }
}

::v-deep .leftshang .el-carousel__container {
    height: torem(308px) !important;
}

::v-deep .leftxia .el-carousel__container {
    width: torem(531px) !important;
    height: torem(420px) !important;
}

.left1 {
    overflow: hidden;
    width: torem(531px);
    height: torem(338px);
    position: relative;
    background: #2750793d;


    .le2 {
        display: flex;
        justify-content: space-around;
        text-align: center;
        margin-top: torem(20px);
        margin-bottom: torem(25px);
    }

    .shu {
        color: #FFB92D;
        font-size: torem(25px) !important;
        font-weight: 700;
        margin-bottom: torem(10px);
    }

}

.leee {
    position: relative;
}

.dian {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: torem(10px);
    left: 45%;

    div {
        width: torem(5px);
        height: torem(5px);
        background: #266EC2;
        border-radius: 50%;
        margin-left: torem(5px);

    }

    div:hover {
        width: torem(5px);
        height: torem(5px);
        background: #fff;
        border-radius: 50%;
        margin-left: torem(5px);
        cursor: pointer;
    }
}

.le1 {
    width: torem(511px);
    height: torem(32px);
    margin-left: torem(10px);
    margin-top: torem(7px);
    background: #1f4e7e67;
    line-height: torem(32px);
    display: flex;

    img {
        width: torem(20px);
        height: torem(19px);
        margin: torem(5px);
    }
}

.left2 {
    width: torem(531px);
    height: torem(475px);
    margin-top: torem(20px);
    overflow: hidden;
    background: #2750795e;
}

.boder {
    width: torem(1900px);
}

.box_dashuju {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url('../../assets/boxbgm.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-size: torem(16px);
}

._title {
    width: 100%;
    height: torem(72px);
    display: flex;
    position: relative;

    div {
        width: 50%;
        height: torem(32px);
        margin-top: torem(30px);

        img {
            width: 100%;
            height: torem(32px)
        }
    }

    .header {
        position: absolute;
        top: torem(5px);
        left: 39.5%;
        color: #FFF4BC;
        font-size: torem(34px);
        text-shadow: torem(1px) torem(1px) torem(1px) #FFF4BC;
    }
}

// .el-carousel .el-carousel--horizontal {
//     width: torem(531px) !important;
//     height: torem(500px) !important;
// }

// ::v-deep .leftxia {
//     height: 480px !important;
// }
.leftxia {
    // font-family: Avenir, Helvetica, Arial, sans-serif;
    // -webkit-font-smoothing: antialiased;
    // -moz-osx-font-smoothing: grayscale;
    // text-align: center;
    color: #fff;

    // margin-top: 60px;
}

.swiper-container {
    width: torem(530px);
    height: torem(475px);
}

.images {
    width: 100%;
}
</style>